import React, { Component } from 'react'
import {Form, Input } from 'antd'

export default class FormTextItem extends Component {
  static defaultProps = { // 自定义属性的默认值
    required: true, // 默认为必传
  };

  render() {
    const rules = []; // 验证规则
    const {
      label, // 标签
      name, // 字段
      required, // 是否必传
      type, // 验证类型
    } = this.props;

    if (required) {
      rules.push({ required, message: '请输入' + label });
    } 
    if (type === 'name') { // 验证中文名字
      rules.push({
        validator: (rule, value, callback) => {
          // if (!value || /^[\u4e00-\u9fa5]{2,4}$/.test(value)) {
          //   // 判断成功
          //   return callback(); // 返回正确就是callback没有参数
          // }
             if (!value || /^.{1,10}$/.test(value)) {
            // 判断成功
            return callback(); // 返回正确就是callback没有参数
          }
          callback(`请输入正确的${label}`); // 否则就是提示信息
        },
      });
    } else if (type === 'phone') { // 验证手机号码
      rules.push({
        validator: (rule, value, callback) => {
          if (!value || /^1\d{10}$/.test(value)) {
            // 判断成功
            return callback(); // 返回正确就是callback没有参数
          }
          callback(`请输入正确的${label}`); // 否则就是提示信息
        },
      })
    } 

    return (
      <Form.Item
        label={label}
        name={name}
        rules={rules}
      >
        <Input />
      </Form.Item>
    )
  }
}
